<script lang="ts" setup>
import { ref, onMounted, reactive, computed, watch, watchEffect } from 'vue';
import { store } from '@/store';
import API from '@/services';

const {
  scene: {
    getSceneGroupRoot // 场景树
  },
  dataTable: { getDataTableGetTableNameAndId }
} = API;
const colorOptions = [
  {
    label: 'card1',
    value: '#F5F8FF'
  },
  {
    label: 'card2',
    value: '#FFFAF3'
  },
  {
    label: 'card3',
    value: '#FFF9F9'
  },
  {
    label: 'card4',
    value: '#E6FCFF'
  },
  {
    label: 'card5',
    value: '#F5FFEC'
  },
  {
    label: 'card6',
    value: '#FEF3F3'
  }
];
const colorClass = ref('');
const formStep1 = ref();
const form = computed(() => store.state.scenesManage.formStep1Data);
const sceneColor = computed(() => form.value.sceneColorType);
const scenesGroupList = ref<any>([]);
const useTableList = ref<defs.OptionVO[]>([]);

watch(sceneColor, (newVal, oldVal) => {
  if (newVal) {
    getSceneColor(newVal);
  }
});

const checkForm = async () => {
  const err = await formStep1.value.validate();
  if (!err) {
    return true;
  } else {
    return false;
  }
};

// 处理场景树的结果
const processTree = (data: any) => {
  data.forEach((item: any) => {
    if (item.level === 5 || item.last == true) {
      delete item.children;
    } else {
      // 匹配不到就继续递归
      item.children && processTree(item.children);
    }
  });
  scenesGroupList.value = data;
};

// 获取场景分组
const fetchSceneGroupRoot = async () => {
  try {
    const { code, data }: any = await getSceneGroupRoot({ data: 0 });
    if (code === 200) {
      const arr = [];
      data?.children.forEach((item: any) => {
        if (!item.parentId) {
          item.parentId = data.id;
        }
      });
      arr.push(data);
      scenesGroupList.value = arr;
      processTree(scenesGroupList.value);
    }
  } catch {}
};

// 获取使用表列表
const fetchDataTableGetTableNameAndId = async () => {
  try {
    const { code, data } = await getDataTableGetTableNameAndId({
      tableName: ''
    });
    if (code === 200 && data) {
      useTableList.value = data;
    }
  } catch {}
};

// 获取当前的选中颜色
const getSceneColor = (val: any) => {
  colorOptions.forEach((item: any) => {
    if (item.value === val) {
      colorClass.value = item.label;
    }
  });
};

// 改变当前的选中使用表(改变了step1的使用表 step2 step3都要被清空(编辑创建均是))
const getUseTable = (val: any) => {
  console.log('直接改变的步骤1使用表');
  store.commit('scenesManage/changeStep1UseTableId', val);
  store.commit('scenesManage/resetFormStep2');
  store.commit('scenesManage/resetFormStep3');
  store.commit('scenesManage/changeStep1UseTable', true);
};

// 改变当前的选中使用表(改变step2第一个表 联动改变表1 step3被清空(编辑创建均是))
const changeUseTable = (val: any) => {
  console.log('通过改变步骤2使用表联动1');
  form.value.tableSource = val;
  store.commit('scenesManage/resetFormStep3');
  store.commit('scenesManage/changeStep1UseTable', false);
};

// 存储当前的数据
const saveData = () => {
  store.commit('scenesManage/saveFormStep1Data', form.value);
};

onMounted(() => {
  fetchSceneGroupRoot();
  fetchDataTableGetTableNameAndId();
  if (form.value.sceneColorType) {
    getSceneColor(form.value.sceneColorType);
  }
});
defineExpose({ checkForm, saveData, changeUseTable });
</script>

<template>
  <a-form
    :model="form"
    :style="{ width: '600px' }"
    class="form-step1"
    ref="formStep1"
  >
    <a-form-item
      field="cnName"
      label="场景名称:"
      :rules="[{ required: true, message: '请输入场景名称' }]"
      :validate-trigger="['blur']"
    >
      <a-input
        v-model="form.cnName"
        placeholder="请输入"
        :style="{ width: '320px' }"
        allow-clear
      />
    </a-form-item>
    <a-form-item
      field="sceneColorType"
      label="卡片颜色:"
      class="card-form-item"
      :rules="[{ required: true, message: '请选择卡片颜色' }]"
      :validate-trigger="['blur', 'change']"
    >
      <a-select
        :trigger-props="{ contentClass: 'card-color-select-dropdown' }"
        :style="{ width: '103px' }"
        placeholder="请选择"
        v-model="form.sceneColorType"
        :options="colorOptions"
        class="card-select"
        @change="getSceneColor"
        :class="colorClass"
        allow-clear
      >
        <template #arrow-icon>
          <IconDown class="arco-select-arrow-icon" />
        </template>
        <template #option="{ data }">
          <span class="card-color">{{ data.raw.label }}</span>
        </template>
      </a-select>
    </a-form-item>
    <a-form-item
      field="groupId"
      label="场景分组:"
      :rules="[{ required: true, message: '请选择场景分组' }]"
      :validate-trigger="['change', 'blur']"
    >
      <a-cascader
        v-model:model-value="form.groupId"
        :options="scenesGroupList"
        expand-trigger="click"
        allow-clear
        placeholder="请选择"
        :style="{ height: '36px', width: '320px' }"
        :field-names="{
          value: 'id',
          label: 'name',
          children: 'children'
        }"
      />
    </a-form-item>
    <a-form-item field="description" label="场景描述:">
      <a-textarea
        placeholder="请输入"
        allow-clear
        v-model="form.description"
        :style="{ width: '424px' }"
      />
    </a-form-item>
    <a-form-item
      field="tableSource"
      label="使用表:"
      :rules="[{ required: true, message: '请选择使用表' }]"
      :validate-trigger="['change', 'blur']"
    >
      <a-select
        :style="{ width: '320px' }"
        placeholder="请选择"
        v-model="form.tableSource"
        @change="getUseTable"
        allow-clear
      >
        <a-option
          v-for="item of useTableList"
          :value="item.value"
          :label="item.label"
          :key="item.value"
        />
      </a-select>
    </a-form-item>
  </a-form>
</template>

<style lang="scss">
.form-step1 {
  .arco-row {
    .arco-col-5 {
      flex: 0 0 17%;
      width: 17%;
      &.arco-form-item-label-col {
        padding-right: 12px;
      }
    }
  }
}
.card-select {
  .arco-select-view-value {
    width: 64px;
    height: 24px;
    margin: 4px 0;
    color: transparent;
    min-height: auto !important;
  }
  &.card1 {
    .arco-select-view-value {
      background: #f5f8ff;
    }
  }
  &.card2 {
    .arco-select-view-value {
      background: #fffaf3;
    }
  }
  &.card3 {
    .arco-select-view-value {
      background: #fff9f9;
    }
  }
  &.card4 {
    .arco-select-view-value {
      background: #e6fcff;
    }
  }
  &.card5 {
    .arco-select-view-value {
      background: #f5ffec;
    }
  }
  &.card6 {
    .arco-select-view-value {
      background: #fef3f3;
    }
  }
}
.card-color-select-dropdown {
  width: 213px;
  height: 66px;
  .arco-select-dropdown {
    width: 100%;
    height: 100%;
    .arco-select-dropdown-list-wrapper {
      overflow-y: hidden;
      .arco-select-dropdown-list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .arco-select-option {
          width: 64px;
          height: 24px;
          margin: 3px;
          color: transparent;
          border-radius: 1px;
          &:hover {
            border: 1px solid #3c6eff;
          }
          &:nth-child(1) {
            background: #f5f8ff;
          }
          &:nth-child(2) {
            background: #fffaf3;
          }
          &:nth-child(3) {
            background: #fff9f9;
          }
          &:nth-child(4) {
            background: #e6fcff;
          }
          &:nth-child(5) {
            background: #f5ffec;
          }
          &:nth-child(6) {
            background: #fef3f3;
          }
        }
      }
    }
  }
}
</style>
